/* 作品 */
<template>
  <div class="works">
    <BannerImg url="works/banner.png"></BannerImg>
    <Row class="floorW">
      <Layout>
        <Sider hide-trigger>
          <Menu :open-names="['fc','zs']">
            <Submenu name="fc">
              <template slot="title">风采展示</template>
              <MenuItem name="/works/mien" to="/works/mien" class="clorAB7 fS30">学员风采</MenuItem>
              <MenuItem name="/works/environment" to="/works/environment" class="clor8B1 fS30">校区环境</MenuItem>
            </Submenu>
            <Submenu name="zs">
              <template slot="title">作品展示</template>
              <MenuGroup title="美术类">
                <MenuItem name="3-1">乐维童画</MenuItem>
                <MenuItem name="3-2">卓艺书画</MenuItem>
              </MenuGroup>
              <MenuGroup title="语言类">
                <MenuItem name="3-4">领秀口才</MenuItem>
              </MenuGroup>
              <MenuGroup title="音乐类">
                <MenuItem name="3-4">唯乐钢琴</MenuItem>
                <MenuItem name="3-4">格莱美音乐</MenuItem>
              </MenuGroup>
              <MenuGroup title="舞蹈类">
                <MenuItem name="dance1" to="/works/dance">华艺舞校</MenuItem>
                <MenuItem name="3-4">N+街舞</MenuItem>
                <MenuItem name="3-4">新秀国际舞蹈学校</MenuItem>
                <MenuItem name="3-4">凡盛超模星学院</MenuItem>
              </MenuGroup>
              <MenuGroup title="科学类">
                <MenuItem name="3-4">领越科教机器人</MenuItem>
                <MenuItem name="3-4">百艺工坊陶工坊</MenuItem>
              </MenuGroup>
              <MenuGroup title="体育类">
                <MenuItem name="3-4">乐体体育</MenuItem>
                <MenuItem name="3-4">紫竹瑜伽</MenuItem>
                <MenuItem name="3-4">至正宏仁跆拳道</MenuItem>
              </MenuGroup>
            </Submenu>
          </Menu>
        </Sider>
        <Content style="padding-left:50px">
          <router-view></router-view>
        </Content>
      </Layout>
    </Row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less">
.ivu-menu-submenu-title {
  font-size: 30px;
  color: #e62129;
}
.works {
  background: #fff;
  .ivu-layout-sider {
    background: #fff;
  }
  .ivu-menu {
    .ivu-menu-item {
      padding: 10px 24px;
      font-size: 18px;
    }
    .ivu-menu-item-group:nth-of-type(1) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #e40082;
        font-weight: bold;
      }
    }
    .ivu-menu-item-group:nth-of-type(2) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #f08519;
        font-weight: bold;
      }
    }
    .ivu-menu-item-group:nth-of-type(3) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #7c6fb0;
        font-weight: bold;
      }
    }
    .ivu-menu-item-group:nth-of-type(4) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #00a2e9;
        font-weight: bold;
      }
    }
    .ivu-menu-item-group:nth-of-type(5) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #5fa776;
        font-weight: bold;
      }
    }
    .ivu-menu-item-group:nth-of-type(6) {
      .ivu-menu-item-group-title {
        font-size: 28px;
        color: #b04b87;
        font-weight: bold;
      }
    }
  }
}
</style>